<template>
	<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : editStatus ? '查看' : $t('update')"
		:close-on-click-modal="false" :close-on-press-escape="false">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
			label-width="120px">
			<el-form-item prop="lineCity" label="所属城市">
				<el-cascader size="large" filterable clearable :options="options" v-model="dataForm.lineCity"
					:disabled="editStatus" @change="handleChange">
				</el-cascader>
			</el-form-item>
			<el-form-item prop="lineMark" label="所属线路">
				<el-select v-model="dataForm.lineMark" filterable clearable :disabled="editStatus" placeholder="请选择"
					@change="lineMarkC()">
					<el-option v-for="item in options1" :key="item.id" :label="item.dictValue" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="lineName" label="线路名称">
				<el-input v-model="dataForm.lineName" readonly placeholder="请输入线路名称"></el-input>
			</el-form-item>
			<el-form-item v-if="editStatus" prop="createDate" label="登记日期">
				<el-input v-model="dataForm.createDate" readonly placeholder="请输入线路名称"></el-input>
			</el-form-item>
			<el-form-item v-if="editStatus" prop="sysUserName" label="登记人">
				<el-input v-model="dataForm.sysUserName" readonly placeholder="请输入登记人"></el-input>
			</el-form-item>
			<el-form-item v-if="editStatus" prop="stationInfo" label="站点信息">
				<timeLine v-if="timeStatus" :timeLineList="stationList"></timeLine>
				<!-- <div class="stationList" style="height: 300px;">
	       <el-steps direction="vertical">
	         <el-step v-for="(item,index) in stationList" :key="index" :title="item.stationName"></el-step>
	       </el-steps>
	     </div> -->
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button v-if="!editStatus" @click="visible = false">{{ $t('cancel') }}</el-button>
			<el-button v-if="!editStatus" type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import timeLine from '@/components/timeLine.vue'
import { provinceAndCityData, regionData, CodeToText, TextToCode } from 'element-china-area-data'
export default {
	components: {
		timeLine
	},
	data() {
		return {
			visible: false,
			editStatus: false,
			dataForm: {
				id: '',
				lineCity: '',
				lineName: '',
				lineMark: '',
			},
			timeStatus: false,
			cityName: '',
			lineName: '',
			options: provinceAndCityData,
			options1: [],
		}
	},
	computed: {
		dataRule() {
			return {
				lineCity: [{
					required: true,
					message: '所属城市不能为空',
					trigger: 'blur'
				}],
				lineMark: [{
					required: true,
					message: '所属线路不能为空',
					trigger: 'blur'
				}],
				lineName: [{
					required: true,
					message: '线路名称不能为空',
					trigger: 'blur'
				}],
			}
		}
	},
	methods: {
		init(status) {
			this.visible = true
			if (status) {
				this.editStatus = status
			} else {
				this.editStatus = false
			}
			this.$nextTick(() => {

				this.$refs['dataForm'].resetFields()
				if (this.dataForm.id) {
					this.dataForm.lineId = this.dataForm.id
					this.getInfo()
					this.getStaionInfo()

				}
			})
		},
		//获取北京字典的数据
		getdicType(dic) {
			this.$http.get(`/sys/dict/type/page?dictName=${dic}`).then(res => {
				if (res.data.data.list.length == 1) {
					this.$http.get(`/sys/dict/data/page?page=1&limit=1000000&dictTypeId=${res.data.data.list[0].id}`).then(res => {
						this.options1 = res.data.data.list
					})
				} else {
					this.options1 = []
					this.dataForm.lineMark = ''
					this.lineName = ''
				}

			})
		},
		//获取所有站点的信息
		getStaionInfo() {
			this.$http.get(`/psc/station/sortList/${this.dataForm.id}`).then(res => {
				this.stationList = res.data.data
				this.timeStatus = true
			})
		},
		// 城市选择
		handleChange(val, num) {
			if (val.length !== 0) {
				if (CodeToText[val[1]] !== '市辖区') {
					var text = CodeToText[val[1]]
					let name = text.split("市")
					this.getdicType(name[0])
					this.cityName = name[0]
				} else {
					var text = CodeToText[val[0]]
					let name = text.split("市")
					this.getdicType(name[0])
					this.cityName = name[0]
				}
				if (num !== 1) {
					this.dataForm.lineName = this.cityName + this.lineName;
				}
			}

		},
		//线路选择
		lineMarkC() {
			this.options1.forEach(item => {
				if (this.dataForm.lineMark == item.id) {
					this.lineName = item.dictValue
					this.dataForm.lineName = this.cityName + this.lineName;
				}
			})
		},
		handleSuccess(res, file, fileList) {
			if (res.code == 0) {
				this.dataForm.doorPath = res.data
			}
		},
		// 获取信息
		getInfo() {
			this.$http.get(`/psc/line/${this.dataForm.id}`).then(({
				data: res
			}) => {
				if (res.code !== 0) {
					return this.$message.error(res.msg)
				}
				this.dataForm = {
					...this.dataForm,
					...res.data,
				}

				this.dataForm.lineCity = JSON.parse(this.dataForm.lineCity)
				this.handleChange(this.dataForm.lineCity, 1)
			}).catch(() => { })
		},
		// 表单提交
		dataFormSubmitHandle: debounce(function () {
			this.$refs['dataForm'].validate((valid) => {
				if (!valid) {
					return false
				}
				var obj = {
					lineId: this.dataForm.id,
					lineCity: JSON.stringify(this.dataForm.lineCity),
					lineMark: this.dataForm.lineMark,
					lineName: this.dataForm.lineName
				}
				this.$http[!this.dataForm.id ? 'post' : 'put']('/psc/line', obj).then(({
					data: res
				}) => {
					if (res.code !== 0) {
						return this.$message.error(res.msg)
					}
					this.$message({
						message: this.$t('prompt.success'),
						type: 'success',
						duration: 500,
						onClose: () => {
							this.visible = false
							this.$emit('refreshDataList')
						}
					})
				}).catch(() => { })
			})
		}, 1000, {
			'leading': true,
			'trailing': false
		})
	}
}
</script>
<style scoped>
.stationList>>>.el-step__icon-inner {
	opacity: 0;
}

.stationList>>>.el-step.is-vertical .el-step__main {
	display: flex;
	align-items: center;
}

.stationList>>>.el-step.is-vertical .el-step__title {
	line-height: auto;
	padding-bottom: 0px;
}

.stationList>>>.el-step:last-of-type .el-step__line {
	display: block;
}
</style>
